{% extends 'myhome/index.html'%}
{% block tit %}
    <title>确认订单</title>
{% endblock %}

{% block css %}
    <link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/css/jsstyle.css" rel="stylesheet" type="text/css" />

{% endblock %}

{% block js %}
    <script type="text/javascript" src="/static/myhome/js/address.js"></script>
{% endblock %}

{% block con %}
    <div class="concent">
        <!--地址 -->
        <div class="paycont">
            <div class="address">
                <h3>
                    确认收货地址
                </h3>
                <div class="control">
                    <div class="tc-btn createAddr theme-login am-btn am-btn-danger">
                        使用新地址
                    </div>
                </div>
                <div class="clear">
                </div>
                <li class="user-addresslist" style="display: none">
                    <div class="address-left">
                        <div class="user DefaultAddr">
                            <span class="buy-address-detail">
                                <span class="buy-user">
                                    艾迪
                                </span>
                                <span class="buy-phone">
                                    15871145629
                                </span>
                            </span>
                        </div>
                        <div class="default-address DefaultAddr">
                            <span class="buy-line-title buy-line-title-type">
                                收货地址：
                            </span>
                            <span class="buy--address-detail">
                                <span class="province">
                                    湖北
                                </span>
                                
                                <span class="city">
                                    武汉
                                </span>
                                
                                <span class="dist">
                                    武昌
                                </span>
                                
                                <span class="street">
                                    东湖路75号众环大厦2栋9层902
                                </span>
                                
                            </span>

                        </div>
                        <ins class="deftip hidden">
                            <span class="ob"></span>
                            默认地址
                        </ins>

                    </div>
                    <div class="address-right">
                        <span class="am-icon-angle-right am-icon-lg">
                        </span>
                    </div>
                    <div class="clear">
                    </div>
                    <div class="new-addr-btn">
                        <a href="javascript:void(0)"  class="rm">
                            设为默认
                        </a>
                        <span class="new-addr-bar rm">
                            |
                        </span>
                        <a href="#">
                            编辑
                        </a>
                        <span class="new-addr-bar">
                            |
                        </span>
                        <a href="" onclick="delClick(this);">
                            删除
                        </a>
                    </div>
                </li>
                <ul class="AddressAll">
           
                   
                </ul>
                <div class="clear">
                </div>
            </div>
            <!--物流 -->
            <div class="logistics">
                <h3>
                    选择物流方式
                </h3>
                <ul class="op_express_delivery_hot wllist">
                    <li data-value="yuantong" class="OP_LOG_BTN  ">
                        <i class="c-gap-right" style="background-position:0px -468px">
                        </i>
                        圆通
                        <span>
                        </span>
                    </li>
                    <li data-value="shentong" class="OP_LOG_BTN  ">
                        <i class="c-gap-right" style="background-position:0px -1008px">
                        </i>
                        申通
                        <span>
                        </span>
                    </li>
                    <li data-value="yunda" class="OP_LOG_BTN  ">
                        <i class="c-gap-right" style="background-position:0px -576px">
                        </i>
                        韵达
                        <span>
                        </span>
                    </li>
                    <li data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last ">
                        <i class="c-gap-right" style="background-position:0px -324px">
                        </i>
                        中通
                        <span>
                        </span>
                    </li>
                    <li data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom">
                        <i class="c-gap-right" style="background-position:0px -180px">
                        </i>
                        顺丰
                        <span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="clear">
            </div>
            <!--支付方式-->
            <div class="logistics">
                <h3>
                    选择支付方式
                </h3>
                <ul class="pay-list">
                    <li data-value="yinlian" class="pay card">
                        <img src="/static/myhome/images/wangyin.jpg">
                        银联
                        <span>
                        </span>
                    </li>
                    <li data-value="weixin" class="pay qq">
                        <img src="/static/myhome/images/weizhifu.jpg">
                        微信
                        <span>
                        </span>
                    </li>
                    <li data-value="taobao" class="pay taobao">
                        <img src="/static/myhome/images/zhifubao.jpg">
                        支付宝
                        <span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="clear">
            </div>
            <!--订单 -->
            <div class="concent">
                <div id="payTable">
                    <h3>
                        确认订单信息
                    </h3>
                    <div class="cart-table-th">
                        <div class="wp">
                            <div class="th th-item">
                                <div class="td-inner">
                                    商品信息
                                </div>
                            </div>
                            <div class="th th-price">
                                <div class="td-inner">
                                    单价
                                </div>
                            </div>
                            <div class="th th-amount">
                                <div class="td-inner">
                                    数量
                                </div>
                            </div>
                            <div class="th th-sum">
                                <div class="td-inner">
                                    金额
                                </div>
                            </div>
                            <div class="th th-oplist">
                                <div class="td-inner">
                                    配送方式
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    {% for v in data %}
                    <div class="bundle  bundle-last">
                        <div class="bundle-main">
                            <ul class="item-content clearfix">
                                <div class="pay-phone">
                                    <li class="td td-item">
                                        <div class="item-pic">
                                            <a href="#" class="J_MakePoint">
                                                <img src="{{ v.goodsid.pic_url }}" class="itempic J_ItemImg" width="100">
                                            </a>
                                        </div>
                                        <div class="item-info">
                                            <div class="item-basic-info">
                                                <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">
                                                   {{ v.goodsid.title }}
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="td td-info">
                                       
                                    </li>
                                    <li class="td td-price">
                                        <div class="item-price price-promo-promo">
                                            <div class="price-content">
                                                <em class="J_Price price-now">
                                                    {{ v.goodsid.price }}
                                                </em>
                                            </div>
                                        </div>
                                    </li>
                                </div>
                                <li class="td td-amount">
                                    <div class="amount-wrapper ">
                                        <div class="item-amount ">
                                            <span class="phone-title">
                                                购买数量
                                            </span>
                                            <div class="sl">
                                                <input class="text_box" readonly type="text" value="{{ v.num }}" style="width:30px;">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-sum">
                                    <div class="td-inner">
                                        <em tabindex="0" class="J_ItemSum number">
                                            {% load pagetag %}
                                            {% cartsum v.num v.goodsid.price %}
                                        </em>
                                    </div>
                                </li>
                                <li class="td td-oplist">
                                    <div class="td-inner">
                                        <span class="phone-title">
                                            配送方式
                                        </span>
                                        <div class="pay-logis">
                                          全场包邮
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="clear">
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    {% endfor %}
                    <div class="clear">
                    </div>

                    <form action="{% url 'myhome_ordercreate' %}" method="POST">
                        {% csrf_token %}
                        <div class="pay-total">
                            <!--留言-->
                            <div class="order-extra">
                                <div class="order-user-info">
                                    <div id="holyshit257" class="memo">
                                        <label>
                                            买家留言：
                                        </label>
                                        <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明"
                                        class="memo-input J_MakePoint c2c-text-default memo-close">
                                        <div class="msg hidden J-msg">
                                            <p class="error">
                                                最多输入500个字符
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--优惠券 -->
                          
                            <div class="clear">
                            </div>
                        </div>

                        <!--含运费小计 -->
                        <div class="buy-point-discharge ">
                            <p class="price g_price ">
                                合计（含运费）
                                <span>
                                    ¥
                                </span>
                                <em class="pay-sum">
                                    244.00
                                </em>
                            </p>
                        </div>

                        <!--信息 -->
                        <div class="order-go clearfix">
                            <div class="pay-confirm clearfix">
                                <div class="box">
                                    <div tabindex="0" id="holyshit267" class="realPay">
                                        <em class="t">
                                            实付款：
                                        </em>
                                        <span class="price g_price ">
                                            <span>
                                                ¥
                                            </span>
                                            <em class="style-large-bold-red " id="J_ActualFee">
                                                244.00
                                            </em>
                                        </span>
                                    </div>
                                    <div id="holyshit268" class="pay-address">
                                        <p class="buy-footer-address">
                                            <span class="buy-line-title buy-line-title-type">
                                                寄送至：
                                            </span>
                                            <span class="buy--address-detail">
                                                <span class="province">
                                                    湖北
                                                </span>
                                                
                                                <span class="city">
                                                    武汉
                                                </span>
                                                
                                                <span class="dist">
                                                    洪山
                                                </span>
                                                
                                                <span class="street">
                                                    雄楚大道666号(中南财经政法大学)
                                                </span>
                                            </span>
                                        </p>
                                        <p class="buy-footer-address">
                                            <span class="buy-line-title">
                                                收货人：
                                            </span>
                                            <span class="buy-address-detail">
                                                <span class="buy-user">
                                                    艾迪
                                                </span>
                                                <span class="buy-phone">
                                                    15871145629
                                                </span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <div id="holyshit269" class="submitOrder">
                                    <div class="go-btn-wrap">
                                        <input type="hidden" name="addressid" value="">
                                        <!-- wl=====>物流方式 -->
                                        <input type="hidden" name="wl">
                                        <!-- buytype=====>支付方式 -->
                                        <input type="hidden" name="buytype">
                                        <input type="hidden" name="cartids" value="{{ request.GET.cartids }}" >
                                        <a id="J_Go" href="javascript:void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">
                                            提交订单
                                        </a>
                                    </div>
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="theme-popover-mask">
        </div>
        <div class="theme-popover" style="height: 500px;">
            <!--标题 -->
            <div class="am-cf am-padding">
                <div class="am-fl am-cf">
                    <strong class="am-text-danger am-text-lg">
                        新增地址
                    </strong>
                    /
                    <small>
                        Add address
                    </small>
                </div>
            </div>
            <hr/>
            <div class="am-u-md-12">
                <form class="am-form am-form-horizontal">
                    <div class="am-form-group">
                        <label for="user-name" class="am-form-label">
                            收货人
                        </label>
                        <div class="am-form-content">
                            <input type="text" id="user-name" placeholder="收货人">
                            <span id="name_msg"></span>
                        </div>

                    </div>
                    <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">
                            手机号码
                        </label>
                        <div class="am-form-content">
                            <input id="user-phone" placeholder="手机号必填" type="email">
                            <span id="phone_msg"></span>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">
                            所在地
                        </label>
                        <div class="am-form-content address">
                            <select name="sheng">
                                {% for v in citys %}
                                    <option value="{{ v.id }}">{{ v.name }}</option>
                                {% endfor %}
                            </select>

                            <select name="shi">
                                <option>--请选择--</option>
                            </select>
                            <select name="xian">
                                <option>--请选择--</option>
                            </select>
                           
                            
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="user-intro" class="am-form-label">
                            详细地址
                        </label>
                        <div class="am-form-content">
                            <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                            <small>
                                100字以内写出你的详细地址...
                            </small>
                        </div>
                    </div>
                    <div class="am-form-group theme-poptit">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <div class="am-btn am-btn-danger" id="addressadd">
                                保存
                            </div>
                            <div class="am-btn am-btn-danger close" id="addressclose">
                                取消
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="clear">
    </div>

    <script type="text/javascript">

        $('.rm').live('click',function(){
            aid = $(this).parents('li').attr('aid')
            $.get('{% url 'myhome_setaddress'%}',{'aid':aid},function(data){
                alert(data['msg'])
                getUserAllAddress()
            },'json')
        })


        // 提交订单
        $('#J_Go').click(function(){
            // 判断表单内容是否为空
            if(!$(this).parents('form').find('input[name=addressid]').val()){
                alert('请选择收货地址');
                return;
            }
            // 判断物流方式是否为空
            if(!$(this).parents('form').find('input[name=wl]').val()){
                alert('请选择物流方式');
                return;
            }
            // 判断支付方式是否为空
            if(!$(this).parents('form').find('input[name=addressid]').val()){
                alert('请选择支付方式');
                return;
            }
            // 获取表单,进行提交
            $(this).parents('form').submit()
        })

        // 选择支付方式
        $('.pay-list li').click(function(){
            $('input[name=buytype').val($(this).attr('data-value'))
        })

        // 选择物流方式
        $('.wllist li').click(function(){
            $('input[name=wl').val($(this).attr('data-value'))           
        })

        // 获取当前用户的所有收货地址
        getUserAllAddress()
        function getUserAllAddress(){
            // 清空之前的数据
            $('.AddressAll').empty()
            // 发送ajax请求获取数据
            $.get('{% url 'myhome_addresslist' %}',function(data){
                // console.log(data)
                if(data.error == 0){
                    // 获取数据
                    var arr = data.data
                    // 循环数据
                    for (var i = 0; i < arr.length; i++) {
                        var li = $('.address li').eq(0).clone()
                        // 判断当前是否为默认
                        if(arr[i].isChecked){
                            li.addClass('defaultAddr')
                            li.find('.rm').remove()
                            // 默认收货地址
                            $('#holyshit268').find('.province').text(arr[i].sheng)
                            $('#holyshit268').find('.city').text(arr[i].shi)
                            $('#holyshit268').find('.dist').text(arr[i].xian)
                            $('#holyshit268').find('.street').text(arr[i].info)
                            $('#holyshit268').find('.buy-user').text(arr[i].shr)
                            $('#holyshit268').find('.buy-phone').text(arr[i].shdh)
                            $('input[name=addressid]').val(arr[i].id)
                        }
                        li.attr('addrid',arr[i].id)
                        li.find('.buy-user').text(arr[i].shr)
                        li.find('.buy-phone').text(arr[i].shdh)
                        li.find('.province').text(arr[i].sheng)
                        li.find('.city').text(arr[i].shi)
                        li.find('.dist').text(arr[i].xian)
                        li.find('.street').text(arr[i].info)
                        li.find('.ob').text(arr[i].id)
                        li.attr('aid',arr[i].id)

                        // 让元素显示
                        li.show()
                        // 创建li加入到ul中
                        $('.AddressAll').append(li)
                    }
                }else{
                    // 没有数据
                }
            },'json')
        }
        // 地址选择 单击事件
        $('.AddressAll li').live('click',function(){
            // 添加class defaultAddr
            $(this).addClass('defaultAddr').siblings().removeClass('defaultAddr')
            // 获取当前选中的地址 电话 守护人
            $('#holyshit268').find('.province').text($(this).find('.province').text())
            $('#holyshit268').find('.city').text($(this).find('.city').text())
            $('#holyshit268').find('.dist').text($(this).find('.dist').text())
            $('#holyshit268').find('.street').text($(this).find('.street').text())
            $('#holyshit268').find('.buy-user').text($(this).find('.buy-user').text())
            $('#holyshit268').find('.buy-phone').text($(this).find('.buy-phone').text())
            $('input[name=addressid').val($(this).attr('addrid'))
        })



        // 收货人的正则验证
        var inpname = document.getElementById('user-name');
        var titname = document.getElementById('name_msg');
        // 失去焦点
        inpname.onblur=function(){
            // 获取vale值
            var val=inpname.value;
            // 判断匹配结果是否正确
            if(val.length!=''){
                titname.innerHTML="成功";
                titname.style.color="green";
            }else{
                titname.innerHTML="请输入正确的收货人姓名";
                titname.style.color="red";
            }
        }

        // 手机号码验证
        var inpphone = document.getElementById('user-phone');
        var titphone = document.getElementById('phone_msg');
        inpphone.onblur=function(){
            // 获取vale值
            var val=inpphone.value;
            var reg = /^1[3|5|7|8|9|4][0-9]{9}$/;
            // 判断匹配结果是否正确
            if(reg.test(val)){
                titphone.innerHTML="成功";
                titphone.style.color="green";
            }else{
                titphone.innerHTML="手机号码不正确";
                titphone.style.color="red";
            }
        }

        
        // 删除地址
        function delClick(ob){
            var addressid = $(ob).parents('.user-addresslist').find('.ob').html()
            
            $.get('{% url 'myhome_addressdel' %}',{"addressid":addressid},function(data){
                // console.log(addressid)
            },'json')
        }
        // 地址添加
        $('#addressadd').click(function(){
            var adds = {}
            adds.shr = $('#user-name').val()
            adds.shdh = $('#user-phone').val()
            adds.sheng = $('select[name=sheng]').val()
            adds.shi = $('select[name=shi]').val()
            adds.xian = $('select[name=xian]').val()
            adds.info = $('#user-intro').val()

            // 发送ajax请求,存储地址
            $.get('{% url 'myhome_addressadd'%}',adds,function(data){
                getUserAllAddress()
                // 触发取消事件
                $('#addressclose').trigger('click')
            },'json')

        })

        // 封装函数运算总价

        function TotalPrice(){
            var Price = 0
            $('.J_ItemSum').each(function(){
                Price += Number($(this).text())
            })
            $('#J_ActualFee').text(Price.toFixed(2))
            $('.pay-sum').text(Price.toFixed(2))
        }

        TotalPrice()

        // 获取页面中的 下拉选框 绑定change事件
        $('.address select').click(function(){
            // 获取当前选中的元素的 id
            var id = $(this).val()

            // 发送ajax请求,获取下一级的数据
            $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
                // 判断返回的数据,如果为空,
                if(data.length == 0){ return }

                // 判断级别
                if(data[0].level == 2){
                    var sel = $('.address select[name=shi]')
                }else if(data[0].level == 3){
                    var sel = $('.address select[name=xian]')
                }

                var ops = ''
                // 遍历获取的结果,拼接成option选项
                for (var i = 0; i < data.length; i++) {
                    ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
                }
                // 把拼接好的选项加入到下拉框中
                sel.html(ops)

            },'json')
        })

    </script>
{% endblock %}